<script setup>
import { ref } from 'vue';
import {useRouter} from "vue-router";
const router=useRouter();

// 跳转界面的
const onSave = () => {
  // 使用useRouter钩子来访问路由实例
  router.push('/Luggage');
};


const imageUrl = ref('https://img.zcool.cn/community/0161e05b644a02a801206a35b41e1e.png@2o.png');
</script>

<template>
<h2 class="welcome-title">取物时请展示此二维码</h2>
  <div id="app">
    <img :src="imageUrl" alt="示例图片" :style="{ width: '100%' }"> </div>
  <h3>取件码:5566</h3>


  <div class="action-buttons">
    <van-button type="primary" round block color="#FF9000" @click="onSave">继续存储</van-button>
  </div>


  <!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->
  <van-notice-bar scrollable text="本二维码只可使用一次，使用过后将作废，请悉知！" />
</template>

<style scoped>
.welcome-title {
  color: #3fb5a7; /* 使用一种鲜明的品牌蓝色 */
  text-align: center;
  margin-bottom: 30px;
}
.action-buttons {
  margin-top: 30px;
}


</style>